<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Toastr style -->
    <link href="/css/plugins/toastr/toastr.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
    <!--        左侧菜单栏-->
    <div class="navbar-default navbar-static-side" role="navigation" th:replace="sidebar::left">
    </div>
    <div id="page-wrapper" class="gray-bg">
        <!--            头部导航栏-->
        <div class="row border-bottom" th:replace="header::nave"></div>

        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>网格选项 - 基于引导网格系统概述</h2>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="index.html">主页</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a>栅格</a>
                    </li>
                    <li class="breadcrumb-item active">
                        <strong>栅格脚手架</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">

            </div>
        </div>
        <!--            内容-->
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>栅格选项</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#" class="dropdown-item">选项 1</a>
                                    </li>
                                    <li><a href="#" class="dropdown-item">选项 2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">

                            <p>通过下面的表格可以详细查看栅格系统如何在多种不同屏幕大小的设备上工作的。</p>
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th class="text-center">
                                            超小屏幕<br>
                                            <small>&lt;576px</small>
                                        </th>
                                        <th class="text-center">
                                            小屏幕<br>
                                            <small>≥576px</small>
                                        </th>
                                        <th class="text-center">
                                            中等屏幕<br>
                                            <small>≥768px</small>
                                        </th>
                                        <th class="text-center">
                                            大屏幕<br>
                                            <small>≥992px</small>
                                        </th>
                                        <th class="text-center">
                                            超大屏<br>
                                            <small>≥1200px</small>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <th class="text-nowrap" scope="row">最大宽度</th>
                                        <td>None (自动)</td>
                                        <td>540px</td>
                                        <td>720px</td>
                                        <td>960px</td>
                                        <td>1140px</td>
                                    </tr>
                                    <tr>
                                        <th class="text-nowrap" scope="row">类前缀</th>
                                        <td><code>.col-</code></td>
                                        <td><code>.col-sm-</code></td>
                                        <td><code>.col-md-</code></td>
                                        <td><code>.col-lg-</code></td>
                                        <td><code>.col-xl-</code></td>
                                    </tr>
                                    <tr>
                                        <th class="text-nowrap" scope="row"># 列数</th>
                                        <td colspan="5">12</td>
                                    </tr>
                                    <tr>
                                        <th class="text-nowrap" scope="row">槽宽</th>
                                        <td colspan="5">30px （每列左右均有 15px 的 padding）</td>
                                    </tr>
                                    <tr>
                                        <th class="text-nowrap" scope="row">可嵌套</th>
                                        <td colspan="5">是</td>
                                    </tr>
                                    <tr>
                                        <th class="text-nowrap" scope="row" 列排序</th>
                                        <td colspan="5">是</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <p>网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。 因此，应用任何
                                <code>.col-md-</code> 一个元素的类不仅会影响其在中型设备上的风格，而且还会影响其在大型设备上的风格
                                <code>.col-lg-</code> 元素内即可。</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--            底部-->
        <div class="footer" th:replace="footer::footer"></div>

    </div>
</div>
</body>
</html>